<template>
    <div>
        <!-- 用户信息列表 -->
        <el-container>
            <!-- 1-1 页面头部信息 -->
            <el-header class="header-all">
                <!-- 1-1-1 查询区域 -->
                <div style="display: inline">
                    <el-input placeholder="请输入要查询的用户姓名" v-model="funame" class="input-name"></el-input>
                    <el-select v-model="value" placeholder="请选择" class="sex-select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="primary" icon="el-icon-search" class="but-select" @click="query()">搜索</el-button>
                </div>
                <!-- 1-1-2 功能区域 -->
                <div class="div-header-but">
                    <el-button type="primary" class="but-select" icon="el-icon-plus" style="margin-right: 17px;"
                        @click="add('plus')" plain>新增</el-button>
                </div>
            </el-header>
            <!-- 列表区域 -->
            <el-main>
                <el-table :data="userList" v-loading="loading" ref="userList" stripe>
                    <el-table-column prop="username" width="160px" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="idcard" width="220px" label="身份证号" align="center"></el-table-column>
                    <el-table-column prop="sex" width="140px" label="性别" align="center"></el-table-column>
                    <el-table-column prop="account" width="220px" label="学号" align="center"></el-table-column>
                    <el-table-column prop="rxTime" width="170px" label="入校日期" align="center"></el-table-column>
                    <el-table-column prop="rdTime" width="170px" label="入档日期" align="center"></el-table-column>
                    <el-table-column width="260px" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="upd(scope.$index, scope.row)">修改</el-button>
                            <el-button type="danger" plain @click="del(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>

        <!-- 模板表单 -->
        <!-- 模态框实现 -->
        <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" prop="title" slot="修改用户">
            <el-form ref="loginForm" :model="user" label-width="80px"> <!--  :rules="rules" -->
                <el-form-item label="姓名" prop="username">
                    <el-input type="text" placeholder="请输入新增用户姓名" v-model="user.username" />
                </el-form-item>
                <el-form-item label="身份证号" prop="idcard">
                    <el-input type="text" placeholder="请输入新增用户身份证号" v-model="user.idcard" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="user.sex" placeholder="请选择" style="width: 100px;">
                        <el-option v-for="  item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学号" prop="account">
                    <el-input type="text" placeholder="请输入新增用户学号" v-model="user.account" />
                </el-form-item>
                <el-form-item label="入校日期" prop="rxTime">
                    <div class="block">
                        <el-date-picker v-model="user.rxTime" type="date" placeholder="请输入新增用户入校日期"
                            value-format="yyyy年MM月dd日">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="入档日期" prop="rdTime">
                    <div class="block">
                        <el-date-picker v-model="user.rdTime" type="date" placeholder="请输入新增用户入档日期"
                            value-format="yyyy年MM月dd日">
                        </el-date-picker>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="add('sure')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "shi",
    data() {
        return {
            options: [{
                value: '0',
                label: '男'
            }, {
                value: '1',
                label: '女'
            }],
            dialogVisible: false,
            value: '',
            funame: "",
            userList: [
                {
                    "username": "宋丹丹",
                    "idcard": "120159753232356",
                    "sex": "女",
                    "account": "1578452",
                    "rxTime": "1901年01月01日",
                    "rdTime": "1901年01月05日",
                }, {
                    "username": "张国荣",
                    "idcard": "120159753232378",
                    "sex": "男",
                    "account": "1578453",
                    "rxTime": "1901年01月01日",
                    "rdTime": "1901年02月05日",
                }, {
                    "username": "李鹏",
                    "idcard": "120159753232314",
                    "sex": "男",
                    "account": "1578455",
                    "rxTime": "1901年01月01日",
                    "rdTime": "1901年03月05日",
                }
            ],
            user: {
                "username": "",
                "idcard": "",
                "sex": "",
                "account": "",
                "rxTime": "",
                "rdTime": "",
            },
            showTable: [],
            loading: false,
        }
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 搜索
        query() {
            const queryUserList = [];
            let searchArr = this.showTable;
            // 如果用户姓名为空, 性别不为空
            if ((this.funame == null || this.funame == "") && (this.value != null && this.value != "")) {
                if (this.value == "0") {
                    this.value = "男"
                } else if (this.value == "1") {
                    this.value = "女"
                }
                searchArr.forEach((e) => {
                    console.log(e.sex);
                    if (e.sex == this.value) {
                        queryUserList.push(e);
                    }
                });
            }
            // 如果用户姓名不为空, 性别为空
            if ((this.funame != null || this.funame != "") && this.value == "") {
                if (this.value == "0") {
                    this.value = "男"
                } else if (this.value == "1") {
                    this.value = "女"
                }
                console.log(this.funame);
                searchArr.forEach((e) => {
                    if (e.username == this.funame) {
                        queryUserList.push(e);
                    }
                });
            }

            // 如果用户姓名不为空, 性别不为空
            if ((this.funame != null || this.funame != "") && this.value != "") {
                if (this.value == "0") {
                    this.value = "男"
                } else if (this.value == "1") {
                    this.value = "女"
                }
                searchArr.forEach((e) => {
                    if (e.username === this.funame && e.sex === this.value) {
                        queryUserList.push(e);
                    }
                });
            }
            // 如果用户姓名为空, 性别为空
            if ((this.funame == null || this.funame == "") && this.value == "") {
                this.userList.forEach((e) => {
                    queryUserList.push(e);
                });
            }
            this.userList = queryUserList;
        },
        // 新增
        add(string) {
            // 表示新增的按钮点击
            if (string === "plus") {
                this.dialogVisible = true;
                this.dialogVisible = "";
                this.user.username = "";
                this.user.idcard = "";
                this.user.sex = "";
                this.user.account = "";
                this.user.rxTime = "";
                this.user.rdTime = "";
                // 表示确定的按钮点击
            } else if (string === "sure") {
                // if ()
                this.dialogVisible = false;
                if (this.user.sex == 0) {
                    this.user.sex = "男"
                } else {
                    this.user.sex = "女"
                }
                this.userList.push(this.user);
            }
        },
        // 修改
        upd(index, row) {
            this.dialogVisible = true;
            this.title = "修改用户";
            this.user.username = row.username;
            this.user.idcard = row.idcard;
            this.user.sex = row.sex;
            this.user.account = row.account;
            this.user.rxTime = row.rxTime;
            this.user.rdTime = row.rdTime;
            var user = Object.assign({}, row);
        },
        // 删除
        del(index, row) {
            this.$confirm('确定删除' + row.username + '吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error',
            }).then(() => {
                this.userList.splice(index, 1);
            });
        },
        // 取消
        cancel() {
            this.dialogVisible = false;
        },

    },
    watch: {
        value(item1, item2) {
            if (item1 == "") {
                this.userList = this.showTable;
            }
            console.log("监听");
        },
    },
    mounted() {
        this.showTable = this.userList;
    },

}
</script>

<!-- 1-1-1 开始对应每个控件及页面的样式进行绘制 -->
<style>
.input-name {
    width: 200px;
    margin-top: 20px;
    margin-left: 20px;
    padding: 0px;
    size: mini;
}

.but-select {
    margin-left: 10px;
}

.div-header-but {
    margin-left: 5px;
    margin-right: 20px;
    display: inline;
}

.header-all {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sex-select {
    margin-left: 5px;
    width: 90px;
}
</style>